import React, { useState } from "react";
import PropTypes from "prop-types";
import Wrap from "../../hoc/Wrap";
import classNames from "classnames";

// import "./index.css";

const typeMap = {
  success: "bg-green-400 border-green-500",
  error: "bg-red-400 border-red-500",
  default: "bg-gray-400 border-gray-500",
  warning: "bg-yellow-400 border-yellow-500",
  processing: "bg-blue-400 border-blue-500",
}

const Tag = ({ children, color, style, closable, onClose, visible, ...rest }) => {
  let tag = React.createRef()
  const handleClose = e => {
    e.stopPropagation()
    if (visible !== undefined && !!visible) return
    tag.current.style.display = 'none'
    onClose && onClose()
  }

  const classString = classNames('px-2 text-xs border', typeMap[color])
  const styleObj = {
    backgroundColor: typeMap[color] ? undefined : color,
    borderColor: typeMap[color] ? undefined : 'transparent',
    display: (visible !== undefined && !visible) ? 'none' : 'inline-block',
    ...style
  }
  return (
    <span
      className={classString}
      style={styleObj}
      ref={tag}
      {...rest}
    >
      {children}
      {closable && <button onClick={handleClose} className={'ml-2 cursor-pointer outline-none focus:outline-none'}>X</button>}
    </span>
  )
}

Tag.defaultProps = {
  color: 'default'
}

export default Tag
  // < div className = " px-2 text-xs cursor-pointer ml-2" ></div >
  //当设置了visible，点击关闭功能失效 !('visible' in props)没有这个属性则开启 | visible === undefined没有值则开启
  //当设置了visible，必须为false才可通过点击被关闭，否则显示 ('visible' in props)&&!visible有这个属性且为false则开启 
